<template>
  <div class="home">
    <router-view />
    <div class="nav">
      <ul class="nav-inner">
        <li v-for="(x, index) in list" :key="x.id" @click="click(index,x)">
          <!-- <router-link :to="'/layout/' + x.src">{{ x.title }}</router-link> -->
          <img :src="require(`../assets/images/ic_tab_${current == index ? x.active:x.normal}.png`)"/>
          <span :class="[current == index ? 'active' : '']">{{ x.title }}</span>
        </li>
      </ul>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      current: 0,
      list: [
        {
          title: "首页",
          path: "",
          id: 0,
          normal: "home_normal",
          active: "home_active",
        },
        {
          title: "书影音",
          path: "book",
          id: 1,
          normal: "status_normal",
          active: "status_active",
        },
        {
          title: "广播",
          path: "broadcast",
          id: 2,
          normal: "subject_normal",
          active: "subject_active",
        },
        {
          title: "小组",
          path: "groups",
          id: 3,
          normal: "group_normal",
          active: "group_active",
        },
        {
          title: "我的",
          path: "me",
          id: 4,
          normal: "profile_normal",
          active: "profile_active",
        },
      ],
    };
  },
  methods: {
    click(index,x) {
      this.current = index;
      this.$router.push('/layout/'+x.path)
    },
  },
};
</script>
<style lang="scss" scoped>
body {
  margin: 0;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
}
.nav {
  background-color: #fff;
  position: fixed;
  z-index: 1;
  bottom: 0;
  width: 100%;
}
.nav-inner img {
  width: 4rem;
}
.nav-inner > li {
  height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-inner {
  margin: 0;
  height: 6rem;
  padding: 0;
  display: flex;
  justify-content: space-around;
  bottom: 0;
}
.active {
  color: aquamarine;
}
</style>